<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/list.css"/>
	</head>
	<body>
		<!--链接首页头部-->
		<div id="index_top"></div>
		<!--链接首页的悬浮框-->
		<div id="index_floatRight"></div>
		<!--链接首页的回到顶部-->
		<div id="index_return_top"></div>
		<!--链接首页购物篮-->
		<div id="index_car"></div>
		<section>
			<!--顶部2px绿线-->
			<div class="xijiejuedingchengbai"></div>
			<div class="list_content">
			<!--内容左-->
				<div class="list_left clear">
					<!--内容左头-->
					<div class="list_left_top">
						<a href="#">
							<img src="../image/list_img/top1.jpg" alt="" />
						</a>
					</div>
					<!--内容左脖子-->
					<div class="list_left_bozi">
						<div class="fenlei">
							相关分类：
						</div>
						<ul>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>
						</ul>
					</div>
					<!--脖子2-->
					<div class="list_left_bozi">
						<div class="fenlei">
							品牌：
						</div>
						<ul>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>
							<li><a href="#">海鲜冻品</a></li>
							<li><a href="#">水产大全</a></li>
							<li><a href="#">鲜活类</a></li>	
						</ul>
					</div>
					<!--列表脖子3-->
					<div class="bozi3">
						<!--脖子三左-->
						<div class="bozi3_left">
							<span>综合排序</span>
							<span>人气</span>
							<span>价格</span>
						</div>
						<!--脖子三右-->
						<div class="bozi3_right">
							<p>共 <span id="number">76 </span>款商品 <span id="jiye">
								1/3
							</span></p>
							<ul>
								<li>上一页</li>
								<li>下一页</li>
							</ul>
						</div>
					</div>
					<!--列表左内容-->
						<ul id="list">
							<!--接收json数据-->
							<!--
							<li>
								<div id="list_img_box" class="list_img_box">
									<img src="../image/list_img/1.jpg" alt="" />
									<p id="list_img_box_float" class="list_img_box_float">
										<span id="list_img_box_float_left" class="list_img_box_float_left">
											||| 胖胖胖胖胖
										</span>
										<span id="list_img_box_float_right" class="list_img_box_float_right">
											||| 蛋蛋蛋蛋蛋
										</span>
									</p>
								</div>
								<div id="list_price_box" class="list_price_box">
									<span id="list_price_price">
										￥123.00元
									</span>
									<span id="list_price_background" class="list_price_background">
										
									</span>
								</div>
								<div id="list_xiangjie" class="list_xiangjie">
									<p id="list_xiangjie_zi" class="list_xiangjie_zi">中惠 大进口了大家独立思考大家撒李大家撒李第三阶段雷克萨读书卡</p>
									<p id="list_xiangjie_img" class="list_xiangjie_img">
										<img src="../image/list_img/hehe.png" alt="" />
									</p>
								</div>
							</li>
							-->
						</ul>
				</div>

			<!--列表右-->
				<div class="list_right">
					
				</div>
			</div>
		</section>
		<!--链接首页的底部-->
		<div id="index_footer"></div>
	</body>
</html>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/list.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	 * 通过load链接一个头
	 */
	$("#index_top").load("index.html header",function(){
		//二级菜单的效果.
		$("#menu_1 li").bind("mouseenter",function(){
			//滑过每个li让颜色变白.
//			$(this).css("background":"#ffffff");
			$(this).children("div").css({"z-index":666}).stop().fadeIn()
			console.log($(this));
			$(this).children(".hehe").css({"background":"#ffffff","color":"#1a9733"})
		}).bind("mouseleave",function(){
			$(this).children("div").stop().fadeOut();
			$(this).children(".hehe").css({"background":"#1a9733","color":"#ffffff"});
		})
		//改变二级菜单的背景.
		$("#menu").css({"background":"#1a9733","display":"none"});
		//鼠标滑过的时候让二级菜单出来.
		$("#nav_left").hover(function(){
			$("#menu").css({"display":"block"});
		},function(){
			$("#menu").css({"display":"none"});
		})

	});
	/*
	 * 通过load链接右侧悬浮框与回到顶部的悬浮.
	 */
	$("#index_floatRight").load("index.html #float_r",function(){
		//2.鼠标滑过购物篮变色.
	$(".r_car").hover(function(){
		//让自己变绿.
		$(this).css({"background":"#1a9733"})
		//让购物车变白色.
		$(".che").css({"background":"url(../image/yuan.png) no-repeat -24px -154px"})
	},function(){
		//移出变回
		$(this).css({"background":""})
		$(".che").css({"background":"url(../image/yuan.png) no-repeat 2px -154px"})
	})
////////////////////////////////结束/////////////////////////////////////
	//3.鼠标点击右浮动购物车让购物篮出来.
	$(".r_car").click(function(){
		$(".car_box").toggle();
	})
////////////////////////////////结束/////////////////////////////////////
	//4.滑过QQ让东西出来.
	$(".qq").hover(function(){
		$(this).css({"background":"#1EAA39"})
		//让QQ对话框出来.
		$(".qq_l").css({"display":"block"})
	},function(){
		$(this).css({"background":""})
		//划出消失.
		$(".qq_l").css({"display":"none"})
	})
////////////////////////////////结束/////////////////////////////////////
	//5.滑过phone让东西出来.
	$(".phone").hover(function(){
		$(this).css({"background":"#1EAA39"})
		//让QQ对话框出来.
		$(".phone_l").css({"display":"block"})
	},function(){
		$(this).css({"background":""})
		//划出消失.
		$(".phone_l").css({"display":"none"})
	})
////////////////////////////////结束/////////////////////////////////////
	//6.鼠标滑过二维码让二维码出来.
	$(".erwei").hover(function(){
		$(".erwei_l").stop().animate({"left":"-190px"})
	},function(){
		$(".erwei_l").stop().animate({"left":"40px"})
	})
////////////////////////////////结束/////////////////////////////////////
	});
	$("#index_return_top").load("index.html #retrun_top_ge",function(){
	/*
	 * 悬浮框的事件.
	 */
	//1.回到顶部.并让顶部按钮颜色变色.
	var retrun_top = document.getElementById("retrun_top");
	//console.log(scrollTop);
	retrun_top.onclick = function(){
		document.documentElement.scrollTop = 0;
	}
	$("#retrun_top_ge").hover(function(){
		$(this).css({"background":"green"})
	},function(){
		$(this).css({"background":"black"})
	})
////////////////////////////////结束/////////////////////////////////////
	})
	/*
	 * 获取购物篮子
	 */
	$("#index_car").load("index.html .car_box",function(){
		//设置一个开关.
		var kg = true;
		$(".r_car").click(function(){
			if(kg){
				$(".car_box").css({display:"block"});
				kg = false;
			}else{
				$(".car_box").css({display:"none"});
				kg = true;
			}
		})
	});
	/*
	 * 获取首页底部
	 */
	$("#index_footer").load("index.html footer");
</script>